<template>
  <el-drawer
    title="提现明细"
    :visible.sync="drawer_open"
    size="950px"
    append-to-body
  >
  
    <div class="user">
      <!-- <div class="common-seach-wrap">
        <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                size="small"
                v-model="searchForm.create_time"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div> -->
      <div class="product-content">
      <div class="table-wrap">
  
        <el-table size="small" :data="tableData.data"  border style="width: 100%"   v-loading="loading">

          <el-table-column prop="name" label="商户"></el-table-column>

          <el-table-column prop="money" label="提现金额"></el-table-column>
          
          <el-table-column  label="状态">
            <template slot-scope="scope">
  
              <span v-if="scope.row.status == 0" style="color: green;">审核中</span>
              <span v-if="scope.row.status == 1" style="color: blue;">已打款</span>
              <span v-if="scope.row.status == 2" style="color: red;">已拒绝</span>

            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注"></el-table-column>
          <el-table-column  label="打款凭证(点击图片放大)">
            <template slot-scope="scope">

              <div style="cursor: pointer;"><img  @click="imgShow(scope.row.payment_images)" v-img-url="scope.row.payment_images" style="width: 60px;" alt=""/></div>

            </template>
          </el-table-column>

          <!-- <el-table-column prop="user_name" label="操作员"></el-table-column> -->

          <el-table-column prop="create_time" label="时间"></el-table-column>
          
        </el-table>
      </div>
    </div>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="curPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalDataNumber"
        ></el-pagination>
      </div>
  
    </div>
  </el-drawer>
</template>
<script>

import SupplierApi from "@/api/supplier.js";

export default {
  components:{
    
  },
  data() {
    return {
     
      drawer_open: false,
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      searchForm: {
        search: '',
   
        create_time: ''
      },
   
  
     
    }
  },
  props: ['open_withdrawal','shop_id','random'],
  watch: {
    drawer_open(value) {
      this.$emit('update:open_withdrawal', value);
    },
    open_withdrawal(value) {
      this.drawer_open = value;
      
    },
   

    random(){
      this.curPage = 1;
      console.log('提现记录',this.random)
      this.getData();
    }
  },

  methods: {

    imgShow(imageUrl) {
      const image = new Image()

      image.src = imageUrl
      image.onload = () => {
        //创建弹出层
        const previewContatiner = document.createElement('div')
        previewContatiner.style.position = 'fixed'
        previewContatiner.style.top = 0
        previewContatiner.style.bottom = 0
        previewContatiner.style.left = 0
        previewContatiner.style.right = 0
        previewContatiner.style.zIndex = 9999
        previewContatiner.style.backgroundColor = 'rgba(0,0,0,0.8)'
        previewContatiner.style.display = 'flex'
        previewContatiner.style.justifyContent = 'center'
        previewContatiner.style.alignItems = 'center'
        document.body.appendChild(previewContatiner)
        //在弹出层增加图片
        const previewImage = document.createElement('img')
        previewImage.src = imageUrl
        previewImage.style.maxWidth = '80%'
        previewImage.style.maxHeight = '80%'
        previewImage.style.zIndex = 9999
        previewContatiner.appendChild(previewImage)
        //点击弹出层，关闭预览
        previewContatiner.addEventListener('click', () => {
          document.body.removeChild(previewContatiner)
        })
      }
      image.onerror = function () {
        console.log('图片加载失败')
      }
    },
    /*跨多列*/
    arraySpanMethod(row) {
      if (row.rowIndex % 2 == 0) {
        if (row.columnIndex === 0) {
          return [1, 1];
        }
      }
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.getData();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getData();
    },


    getData() {
      let self = this;
      let Params = this.searchForm;
     
      Params.shop_supplier_id = this.shop_id
    
      Params.page = self.curPage;
      Params.list_rows = self.pageSize;
      self.loading = true;
      SupplierApi.getWithdrawalList(Params, true)
        .then(res => {
          let list = [];
          list = res.data.list.data;
      
          // for (let i = 0; i < res.data.list.data.length; i++) {
          //   let item = res.data.list.data[i];
           
          //   list.push(item);
          // }
          self.tableData.data = list;

          self.totalDataNumber = res.data.list.total;
          // self.exStyle = res.data.ex_style;
          
          // self.order_count = res.data.order_count.order_count;
          self.loading = false;
        })
        .catch(error => {
        });
    },
    /*搜索查询*/
    onSubmit() {
      this.curPage = 1;
      this.tableData = [];
      this.getData();
    },

    
    /*切换菜单*/
    handleClick(tab, event) {
      let self = this;
      self.curPage = 1;
      self.getData();
    },
  }
}

</script>
<style scoped>
.user {
  padding: 20px;
  padding-top: 0;
}

.order-code .state-text {
  padding: 2px 4px;
  border-radius: 4px;
  background: #808080;
  color: #ffffff;
}
.order-code .state-text-red {
  background: red;
}
</style>
